<template>
  <div class="sc-label">
    <div class="sc-header">
      <div class="matirial" v-for="matirial in matirials" :key="matirial.order" @click="doPaint(matirial)" :style="matirial.style">{{matirial.text}}</div>
    </div>
    <div class="sc-history">
      todo
    </div>
  </div>
</template>
<script>
import LabelFactory from './VLabelMatirialFactory'
import deepCopy from '@/util/deepCopy'

export default {
  data () {
    return {
      matirials: [
        {
          text: '大标题',
          style: {
            fontSize: '30',
            fontWeight: '900',
            color: '#131215',
            opacity: 1,
            transform: 'rotate(0deg)',
            top: '10',
            left: '10',
            textAlign: 'center',
            width: '',
            height: ''
          },
          type: 'vLabel',
          order: 1,
          editting: false
        },
        {
          text: '标题',
          style: {
            fontSize: '25',
            fontWeight: '700',
            color: 'black'
          },
          type: 'vLabel',
          order: 2
        },
        {
          text: '小标题',
          style: {
            fontSize: '20',
            fontWeight: '500',
            color: 'black'
          },
          type: 'vLabel',
          order: 2
        },
        {
          text: '正文内容',
          style: {
            fontSize: '16',
            color: 'black'
          },
          type: 'vLabel',
          order: 2
        },
        {
          text: '细文字',
          style: {
            fontSize: '12',
            fontWeight: '300',
            color: 'black'
          },
          type: 'vLabel',
          order: 2
        }
      ]
    }
  },
  methods: {
    doPaint: function (obj) {
      this.$emit('paint', deepCopy.exec(LabelFactory(obj)))
    }
  }
}
</script>

<style lang="scss">
.sc-label {
  .sc-header {
    padding-top: 10px;
    .matirial {
      box-sizing: border-box;
      margin: 0;
      border-top: 1px solid transparent;
      border-bottom: 1px solid transparent;
      &:hover {
        background: #d1d1d1;
        cursor: pointer;
        border-color:  #24ADDE;
      }
    }
  }
  .sc-history {
    margin-top: 10px;
    border-top: 1px solid #24ADDE;
    width: 100%;
  }
}
</style>
